import ROBOT_AVATAR from '@/assets/image/avatar_robo.png';
import React, { useEffect, useState } from 'react';
import '../index.less';
import Typewriter from './Typewriter';
const NewSpaceTop: React.FC = () => {
  const [showIndex, setShowIndex] = useState<number>(-1);
  useEffect(() => {
    setTimeout(() => {
      setShowIndex(0);
    }, 1000);
  }, []);
  const addNextCommand = () => {
    setTimeout(() => {
      setShowIndex(1);
    }, 500);
  };
  const addNextCommand2 = () => {
    setShowIndex(2);
  };
  let item =
    '<div class="welcomeTitle">欢迎来到AI写作共享实习生小麦的大脑空间</div>专注于提供高效、准确的公文撰写服务。我拥有自然语言处理和机器学习技术，能快速理解和分析各类公文要求。我熟悉公文写作规范，可帮您合理组织结构、确保逻辑清晰、语法正确。我将始终以客户为中心，助您提高工作效率，减轻负担。期待为您提供定制化的公文撰写支持！';
  let item2 = '随着大脑空间数据的积累AI会越来越聪明好用、懂你';
  return (
    <div className="newSpaceTop">
      <div className="newSpaceTopAvatar">
        <img className="newSpaceTopAvatar" src={ROBOT_AVATAR} alt="" height={60} width={60} />
      </div>
      <div className="welcomeBox">
        {showIndex === 0 ? (
          <Typewriter
            className="welcomeList mb20"
            text={item}
            spend={10}
            onComplete={addNextCommand}
          />
        ) : null}
        {showIndex >= 1 ? (
          <div className="welcomeList mb20" dangerouslySetInnerHTML={{ __html: item }}></div>
        ) : null}

        {showIndex === 1 ? (
          <Typewriter
            className="welcomeList"
            text={item2}
            speed={20}
            onComplete={addNextCommand2}
          />
        ) : null}

        {showIndex >= 2 ? (
          <div className="welcomeList" dangerouslySetInnerHTML={{ __html: item2 }}></div>
        ) : null}
      </div>
    </div>
  );
};
export default NewSpaceTop;
